<template>
  <div class="iot-page">
    <div class="inner">
      <el-container class="page-iot-container" direction="vertical">
        <iotHeader :type="type"></iotHeader>
        <el-container>
          <el-main class="iot-main">
            <div class="iot-left">
              <iot-blk
                class="today-blk device-blk"
                title="监控区域"
                :moreType="0"
                style="height: 1.7rem !important;"
              >
                <div class="areaTree">
                  <areaTree
                    :isEditable="true"
                    @nodeClick="areaClickAction"
                  ></areaTree>
                </div>
              </iot-blk>
              <iot-blk
                class="today-blk device-blk mt-30"
                title="选择企业"
                :moreType="0"
                style="height: 2.82rem !important;"
              >
                <div class="unit-tree">
                  <UnitList @select="onUnitSelect" ref="unitList"></UnitList>
                </div>
              </iot-blk>
            </div>
            <div class="iot-center">
              <overview ref="overview"></overview>
              <iot-blk
                class="realtime-blk mt-30"
                title="辖区单位/企业分布情况"
                :moreType="0"
                size="big"
                style="height: 2.82rem !important;"
              >
                <histogram ref="histogram"></histogram>
              </iot-blk>
            </div>
            <div class="iot-right">
              <iot-blk
                style="height: 1.7rem !important;"
                class="today-blk device-blk "
                title="终端设备报警"
                :moreType="0"
              >
                <deviceAlarm
                  ref="deviceAlarm"
                  :seriesData="deviceSeriesData"
                ></deviceAlarm>
              </iot-blk>
              <iot-blk
                class="today-blk device-blk mt-30"
                title="辖区预警提醒"
                :moreType="0"
                style="height: 2.82rem !important;"
              >
                <el-table
                  class="reverse"
                  :data="alarmList"
                  style="width: 100%;"
                >
                  <el-table-column
                    prop="name"
                    label="到期提醒"
                    min-width="60"
                  ></el-table-column>
                  <el-table-column
                    prop="expired"
                    label="已过期"
                    min-width="60"
                  ></el-table-column>
                  <el-table-column
                    prop="unexpired"
                    label="预过期"
                    min-width="60"
                  ></el-table-column>
                </el-table>
              </iot-blk>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <!-- 详情 start -->
    <el-dialog
      v-if="detailModalVisible"
      :modal="false"
      :title="detailModalTitle"
      :visible.sync="detailModalVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
    >
      <Detail
        ref="detail"
        :data="activeData"
        @success="submitSuccessAction"
        @cancel="detailModalVisible = false"
      >
      </Detail>
    </el-dialog>
    <!-- 详情 end -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import iotHeader from "@/components/iot/IOTHeader.vue";
import areaTree from "@/components/census/AreaTree.vue";
import Monitor from "@/components/iot/command/monitor.vue";
import UnitList from "@/components/equipment/UnitList.vue";
import Overview from "@/components/emergency/overview.vue";
import Histogram from "../components/emergency/histogram.vue";
import deviceAlarm from "../components/emergency/pie.vue";
import Detail from "@/components/census/record/RecordDetail.vue";

export default {
  name: "Home",
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      type: this.$route.query.type || "fireControl",
      areaData: {},
      areaVisible: true,
      alarmList: [],
      detailModalVisible: false,
      detailModalTitle: "企业单位详情",
      deviceSeriesData: [],
    };
  },
  components: {
    iotHeader,
    Monitor,
    areaTree,
    UnitList,
    Overview,
    Histogram,
    deviceAlarm,
    Detail,
  },
  watch: {
    $route(to, from) {
      location.reload();
    },
  },
  computed: {
    ...mapState(["scale", "siteInfos"]),
  },
  mounted() {
    this.areaClickAction({ id: 0 });
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    getAreaDeviceInfo(areaId) {
      this.$get("/business/business/getAreaDeviceInfo", { areaId }).then(
        (res) => {
          let data = res.data;
          this.deviceSeriesData = [
            {
              name: "消防用水",
              value: data.waterNumber || 0,
            },
            {
              name: "电气火灾",
              value: data.electricalNumber || 0,
            },
            {
              name: "独立烟感",
              value: data.smokeNumber || 0,
            },
            {
              name: "可燃气体",
              value: data.gasNumber || 0,
            },
            {
              name: "智慧视频",
              value: data.viewNumber || 0,
            },
            {
              name: "其他",
              value: data.otherNumber || 0,
            },
          ];
          this.initEcharts(seriesData);
        },
        (err) => {
          this.$message.error(err.msg || "系统错误");
        }
      );
    },
    areaClickAction(data) {
      this.areaData = data;
      this.areaVisible = false;
      this.$refs.unitList.getData(1, data.id);
      this.$refs.overview.getData(data.id);
      this.$refs.histogram.getData(data.id);
      this.getAlarmList(data.id);
      this.getAreaDeviceInfo(data.id);
      //   this.getCommand(data.id);
    },
    onUnitSelect(data) {
      if (data) {
        this.activeUnitId = data.id;
        this.activeData = data;
        this.detailModalTitle = `企业单位详情(${data.name})`;
        this.detailModalVisible = true;
      } else {
        this.activeUnitId = "";
      }
    },
    getAlarmList(areaId) {
      this.$get("/business/business/getAreaWarning", { areaId }).then(
        (res) => {
          this.alarmList = res.data;
        },
        (err) => {
          this.$message.error(err.msg || "系统错误");
        }
      );
    },
  },
  destroyed() {},
};
</script>
<style lang="less">
@import "../assets/css/IOT.less";
</style>
<style lang="less" scoped>
.iot-page {
  .inner {
    position: none;
    width: 100%;
  }
}
// .page-header.iot-header {
//     height: 0.57291667rem !important;
// }
.inner {
  width: 100% !important;
}
/deep/.iot-main {
  display: flex !important;
  justify-content: space-between !important;
  .iot-left,
  .iot-right {
    width: 25%;
    position: inherit !important;
  }
  .iot-blk {
    height: auto;
  }
}
.iot-center {
  width: 45%;
}
.page-iot-container {
}
.areaTree {
  overflow: auto !important;
  height: 1.2rem !important;
  .area-tree {
    padding: 0 !important;
    height: 100% !important;
  }
}
/deep/.unit-list{
  height: 1.8rem !important;
}
</style>
